<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="noPlan" v-if="myJourneies.length == 0">
			<view class="no">
				<image src="https://i.ringzle.com/file/20240104/a41e61c5857c446c8f6c63aa12008681.png"></image>

				<view class="text">暂无行程，快去创建吧~</view>
			</view>
		</view>
		<!-- 我的路线 -->
		<view class="travelPlan" v-if="myJourneies.length > 0">
			<view class="list" v-for="(item, index) in myJourneies" :key="index">
				<view class="list_right">
					<!-- <view class="title">
						<text class="date">{{item.month}}月{{item.day}}日</text>
						<span class="detail">
							{{item.week}}
						</span>
						<view class="cjxc" @tap="goToSelf" v-if="index==0">创建行程</view>
					</view> -->
					<view class="cardline">
						<view class="content">
							<view class="card">
								<view>
									<image class="card_img" :src="item.coverImage" mode="aspectFill">
									</image>
								</view>
								<view class="right">
									<view class=""
										style="display: flex; justify-content: space-between; width: 100%; align-items: center;">
										<view class="p1">
											{{ item.name }}
										</view>
										<view class="del" @click="del(item)">
											<u-icon name="trash" color="#999999" size="28"></u-icon>
										</view>
									</view>
									<!-- <view class="p2"><text>{{item.timePeriod}}</text></view> -->
									<view class="p2"><text>{{ item.planDayNum }}天{{ item.planPlaceNum }}景点</text></view>
								</view>
							</view>
							<view class="button">
								<span @click="goToRouteDetail(item.id)">查看路线</span>
								<span @click="goToScenic()">一键购票</span>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐行程 -->
		<!-- <view class="recommandLine">
			<view class="title">
				推荐行程
			</view>
			<view class="mainContainer">
				<view @click="goToDetail(item.id)" v-for="(item, index) in recommendJourneies" :key="index"
					class="mainContainer_item">
					<view class="mainContainer_title">
						{{item.name}}
					</view>
					<view class="ticketList">
						<view slot="indicator" class="indicator-num">
							<text class="indicator-num__text">{{ item.coverImageList.length }}图</text>
						</view>
						<u-swiper :list="item.coverImageList" @change="e => currentNum = e.current" :autoplay="false"
							indicatorStyle="right: 20px" height='380rpx' style="margin-bottom: 30rpx;">
						</u-swiper>
						<view class="title">{{item.intro}}</view>
						<view class="detail">
							<text>行程历时{{item.planDayNum}}天</text>
							<text>{{item.planPlaceNum}}个景区</text>
						</view>
						<view class="ticketList_tag">
							<u-tag :text="i.tagsName" v-for="(i,idx) in item.tagsList" :key="idx" type="success" plain size="mini"
								borderColor='#EEEEEE'></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="bottomBtn">
			<view class="b_btn" @tap="goToSelf">创建行程</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: uni.getSystemInfoSync().windowHeight - 87,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			titleHeader: '我的行程',
			limit: 10,
			page: 1,
			travelList: [],
			travelSelected: [],
			recommandLine: [{
				title: '海景风光',
				ticketSwiperList: [
					'https://i.ringzle.com/file/20231024/91f2e5616c254e43a7530f8a7f19dea8.png',
					'https://i.ringzle.com/file/20231024/91f2e5616c254e43a7530f8a7f19dea8.png',
					'https://i.ringzle.com/file/20231024/91f2e5616c254e43a7530f8a7f19dea8.png',
				],
				detail: '走走小梅山,观太湖景色 | 去嵊泗渔港，体验风土人情',
				days: 3,
				numbers: 2,
				tag: ["情侣", "家庭", '休闲养生'],
				price: 130,
			}, {
				title: '网红打卡',
				ticketSwiperList: [
					'https://i.ringzle.com/file/20231024/53caf638af59499f9f9f013c742a88b0.png',
					'https://i.ringzle.com/file/20231024/53caf638af59499f9f9f013c742a88b0.png',
					'https://i.ringzle.com/file/20231024/53caf638af59499f9f9f013c742a88b0.png',
				],
				detail: '看看花鸟岛景区，赏岛上繁华遍地 | 去六合朝阳，景区，依山傍海 | 嵊泗长滩华美达酒店',
				days: 2,
				numbers: 3,
				tag: ["情侣", "家庭", '网红打卡'],
				price: 140,
			},],
			currentNum: null,

			myJourneies: [], //我的行程
			recommendJourneies: [], //推荐行程
		}
	},

	methods: {
		del(item) {
			this.$api.del('/api/customrec/deleteRoute/' + item.id).then(res => {
				if (res.data.code === 0) {
					this.$showToast('删除成功');
					setTimeout(() => {
						this.getMyJourneies()
					}, 2000)
				} else this.$showModal(res.data.msg)
			})
		},
		goToScenic() {
			uni.navigateTo({
				url: '/pagesTrip/scenicSpots/index'
			})
		},
		goToDetail(id) {
			uni.navigateTo({
				url: `${'/pagesTrip/custom-travel/routeDetail?id=' + id}`
			})
		},
		getRecommandList() {
			this.$api.get('/api/customrec/recRoutePage', {
				limit: this.limit,
				page: this.page
			}).then(({
				data: res
			}) => {
				this.recommandLine = res.data.list
			})
		},
		getTime() {
			let travelList = this.travelList
			const date = new Date()
			const aaa = travelList.map((i, index) => {
				// const date = new Date(today);
				date.setDate(date.getDate() + index)
				const day = date.getDate()
				const Month = date.getMonth() + 1
				const Week = date.toLocaleDateString('zh-CN', {
					weekday: 'long'
				})
				return {
					...i,
					date: {
						day,
						Month,
						Week
					}
				}
			})
			this.travelList = aaa
		},

		goToSelf() {
			// uni.navigateTo({
			// 	url: '/pagesTrip/custom-travel/preferChoose'
			// })
			uni.navigateTo({
				url: '/pagesTrip/custom-travel/newPreferChoose'
			})
		},
		checkboxChange(val, type) {
			switch (type) {
				case 0:
					this.selectedItem3 = this.selectedItem(val, this.travelList)
					var badgeValue = val.length + ''
					this.value = badgeValue
					break
				case 1:
					this.selectedItem1 = this.selectedItem(val, this.foodList)
					var badgeValue = val.length + ''
					this.value1 = badgeValue
					console.log(val, type, 'val,type');
					break
				case 2:
					this.selectedItem2 = this.selectedItem(val, this.stayList)
					var badgeValue = val.length + ''
					this.value2 = badgeValuemiain
					console.log(val, type, 'val,type');
					break
			}

		},
		goToRouteDetail(id) {
			console.log(id, 'id+++++');
			uni.navigateTo({
				url: '/pagesTrip/custom-travel/routeDetail?id=' + id + "&status=edit"
			})
		},
		goTosysRec() {
			uni.navigateTo({
				url: '/pagesTrip/custom-travel/sysRecommand'
			})
		},
		getMyRoute() {
			this.$api.get('/api/customrec/customRoutePage', {
				limit: this.limit,
				page: this.page
			}).then(({
				data: res
			}) => {
				this.travelList = res.data.list
			})
		},

		getMyJourneies() {
			this.$api.get('/api/customrec/customRoutePage', {
				limit: 999,
				page: 1,
				userId: JSON.parse(uni.getStorageSync('userInfo')).id
			}).then(res => {
				console.log('res', res);
				if (res.data.code === 0) {
					this.myJourneies = res.data.data.list;
				} else this.$showModal(res.data.msg)
			})
		},
		getRecommendJourneies() {
			this.$api.get('/api/customrec/recJourneyPage', {
				limit: 10,
				page: 1
			}).then(res => {
				if (res.data.code === 0) {
					this.recommendJourneies = res.data.data.list;
				} else this.$showModal(res.data.msg)
			})
		}
	},
	onShow() {
		// this.travelList = this.$store.state.travelList
		// console.log(this.travelList, '主页this.travelListthis.travelList');
		this.getTime();
		this.getMyJourneies();

		this.getRecommendJourneies();
	},
	mounted() {
	},
	async onLoad() {
		// this.getMyRoute()
		this.getRecommandList()
	}
}
</script>

<style lang="scss" scoped>
.page {
	background: #F5F8FA;
	width: 750rpx;
	min-height: 100vh;
	// padding-top: 130rpx;
	padding-bottom: 180rpx;
	box-sizing: border-box;
}

.u-button--large {
	height: 88rpx !important;
	width: 690rpx !important;
}

.bottomBtn {
	width: calc(100% - 60rpx);
	height: 180rpx;
	padding: 0 30rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -1rpx 4rpx 1rpx rgba(0, 0, 0, 0.06);
	position: fixed;
	bottom: 0;
	z-index: 2;

	.b_btn {
		width: 100%;
		height: 88rpx;
		background: #007A69;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		margin-top: 39rpx;
	}
}

.noPlan {
	width: 750rpx;
	background: #FFFFFF;
	opacity: 1;
	border-radius: 0rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 60rpx;

	.no {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;

		.text {
			margin-top: 35rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #9A9A9A;
		}

		.create_journey {
			width: calc(100% - 60rpx);
			height: 88rpx;
			background: #007A69;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			letter-spacing: 2rpx;
			margin-top: 60rpx;
		}


		image {
			width: 220rpx;
			height: 150rpx;
			margin-top: 300rpx;
		}
	}

}

.myPlan {
	display: flex;

	.plan {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-around;

		image {
			width: 338rpx;
			height: 148rpx;
			margin: 0 10rpx;
			position: relative;
		}

		.view1 {
			color: #FFFFFF;
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			font-weight: 400;
			margin: 8rpx 0 8rpx 0;
			position: absolute;
			z-index: 1;
			transform: translate(40rpx, 25rpx);

			.span2 {
				font-size: 26rpx;
				opacity: 0.6;
			}
		}

	}

}

.recommandLine {
	height: 100%;
	margin-top: 20rpx;
	background: #FFFFFF;
	padding: 10rpx 24rpx;

	.title {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 0rpx;
		color: #111111;
		margin-top: 40rpx;
	}
}

.travelPlan {
	padding: 20rpx;

	.list_right {

		.title {
			position: relative;

			.cjxc {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #007A69;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}

	.list {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: #FFFFFF;
		margin-top: 20rpx;
		min-height: 300rpx;
		width: 702rpx;
		border-radius: 16rpx;

		&_left {
			display: flex;
			flex-direction: column;

			image {
				height: 30rpx;
				width: 24rpx;
				margin-left: 20rpx;
			}

			.line {
				border-right: #E9E9E9 0.5rpx solid;
				margin: 0 25rpx;
				height: 100%;
			}
		}

		&_right {
			.title {
				.date {
					font-size: 28rpx;
					font-weight: 800;
					color: #111111;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}

				.detail {
					span:nth-child(1) {
						margin: 0 10rpx;
					}
				}
			}

			.cardline {
				display: flex;
				margin-top: 20rpx;

				.content {
					width: 678rpx;

					.card {
						padding: 20rpx;
						display: flex;
						align-items: center;
						flex-direction: row;
						border-top-left-radius: 20rpx;
						border-top-right-radius: 20rpx;
						box-shadow: 0rpx 8rpx 17rpx rgba(0, 0, 0, 0.02);
						border-bottom: 1rpx solid #E9E9E9;

						.card_img {
							height: 160rpx;
							width: 160rpx;
							border-radius: 16rpx;
						}

						.right {
							margin-left: 26rpx;
							width: 100%;

							.p1 {
								color: #111111;
								font-size: 30rpx;
								font-weight: bold;
							}


							.p2 {
								font-size: 24rpx;
								color: #777;
								margin: 20rpx 0 22rpx;

								text:nth-child(2) {
									display: inline-block;
									margin: 0 15rpx;
									font-size: 20rpx;
									color: #EFEFEF;
								}
							}

							.p3 {
								text {
									display: inline-block;
									padding: 6rpx;
									background-color: #fff6e6;
									font-size: 22rpx;
									color: #FF7D01;
									margin-bottom: 18rpx;
									border-radius: 4rpx;
								}
							}
						}

					}

					.button {
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 92rpx;

						text-align: center;
						color: #007A69;

						span {
							line-height: 90rpx;
							width: 50%;
							text-align: center;
							height: 90rpx;
							font-size: 28rpx;
						}

						span:nth-child(1) {
							border-right: 1rpx solid #E9E9E9;
						}
					}



				}

			}
		}



		.detail {}

		.u-icon {
			margin: auto;
		}
	}





}


.ticketList {
	width: 98%;
	height: 592rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 25rpx;

	.title {
		margin-top: 30rpx;
	}

	&_tag {
		display: flex;
	}

	&_price {
		display: flex;
		justify-content: space-between;

		button {
			margin-right: 24rpx;
			margin-top: -15rpx;
		}

		&_money {
			width: 92rpx;
			height: 28rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FF4141;
			line-height: 28rpx;
			display: flex;
			margin-left: 24rpx;
			margin-top: 14rpx;
		}
	}
}

.mainContainer {
	margin-top: 37px;

	&_title {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 32rpx;
		color: #111111;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	&_item {

		border-bottom: 1px solid #EFEFEF;
	}
}

.detail {
	margin: 35rpx 0 15rpx 0;

	text {
		width: 134rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 0rpx;
		color: #999999;
		opacity: 1;
		margin-right: 10rpx;
	}

	text:last-child {
		color: #007A69;
	}
}

.indicator-num__text {
	color: #f3f3f3f9
}
</style>